<template>
  <div>

    <h3>Abc组件 - 按钮和输入框互斥效果</h3>
    <p>{{ age }}</p>
    <input type="text" v-if="flag" @blur="flag = false" ref="ipt"/>
    <button v-else @click="showIpt">按钮</button>

  </div>
</template>

<script>
export default {
    data() {
        return {
            flag: true,
            age: 20
        }
    },
    methods: {
        showIpt () {
            this.flag = true
            // this.age++
            // this.age++
            // this.age++
            // this.age++
            // this.age++
            // Vue 的数据驱动视图。是说数据变化了，页面会自动更新，但是也不是立即更新
            // Vue 官方的说法是，会在下次循环的时候更新页面
            // 如果希望马上获取到页面元素，可以将代码写到 this.$nextTick 中
            this.$nextTick(() => {
                // console.log(this.$refs.ipt)
                this.$refs.ipt.focus()    //  让输入框获取焦点
            })
        }   
    }
}
</script>

<style>

</style>